<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <title>汽修管理系统</title>
    <!--<link href="/public/bootstrap/css/Copy of bootstrap.min.css" rel="stylesheet"/>-->
    <script src="/public/jquery/jquery-1.11.1.min.js"></script>
    <script src="/public/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link href="/master/css/mywork.css" rel="stylesheet"/>
    <link href="/public/layui/css/layui.css" rel="stylesheet"/>
    <script src="/public/layui/layui.js"></script>

</head>
<body>
<div id="mywork" >
    <span id="hword">维修清单</span>
    <el-button size="mini" type="success" @click="findHandleOrder" icon="el-icon-search" style="position: absolute;top:3px;right:70px;">查询</el-button>
    <el-button type="text" size="mini" v-if="activeName=='0'||activeName=='2'" style="position: absolute;top:3px;right:10px;" @click="activeClick();">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
    <el-button type="text" size="mini" v-if="activeName=='1'" style="position: absolute;top:3px;right:10px;" @click="activeClick();">收起<i class="el-icon-arrow-up el-icon--right"></i></el-button>
   <!--查询表单-->
    <div>
        <el-form :inline="true" ref="form" :model="ruleForm" id="ruleForm" label-width="100px">
            <el-form-item  label="客户名称：">
                <el-input  v-model="ruleForm.ruleName" placeholder="请输入客户名称"></el-input>
            </el-form-item>
            <el-form-item id="carPai" label="车牌号码：">
                <el-col :span="11">
                    <el-form-item prop="ruleCarWord">
                        <el-select placeholder="甘" v-model="ruleForm.ruleCarWord">
                            <el-option label="晋" value="shanghai"></el-option>
                            <el-option label="豫" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <el-form-item prop="ruleCarEng">
                        <el-select placeholder="G" v-model="ruleForm.ruleCarEng">
                            <el-option label="A" value="shanghai"></el-option>
                            <el-option label="B" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">·</el-col>
            </el-form-item>
            <el-form-item style="margin-left: -20px;">
                <el-input  v-model="ruleForm.ruleCarCode" placeholder="车牌号" id="Carty"></el-input>
            </el-form-item>
            <el-form-item label="车辆品牌：" prop="ruleType">
                <el-select v-model="ruleForm.ruleType" placeholder="请选择车辆品牌">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="配件名称：">
                <el-input  v-model="ruleForm.rulePartName" placeholder="配件名称"></el-input>
            </el-form-item>

        </el-form>
    </div>
    <!--更多查询模块的表单-->
    <div v-if="activeName=='1'" id="second">
        <el-form :inline="true" ref="showForm" :model="ruleForm" label-width="100px">
            <el-form-item label="维修类型：" prop="relType">
                <el-select placeholder="G" v-model="ruleForm.ruleType">
                    <el-option label="A" value="shanghai"></el-option>
                    <el-option label="B" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="经办人：">
                <el-input  v-model="ruleForm.ruleHandle" placeholder="请输入经办人姓名"></el-input>
            </el-form-item>
            <el-form-item label="维修人：">
                <el-input  v-model="ruleForm.rulePart" placeholder="请输入维修人姓名"></el-input>
            </el-form-item>
            <el-form-item label="维修时间：">
                <el-date-picker v-model="ruleForm.ruleTime" range-separator="-" type="dates" id="dates" placeholder="请选择日期"></el-date-picker>
            </el-form-item>
        </el-form>
    </div>
    <div id="table-operate">
        <el-button type="text" style="padding: 8px;" @click="dialogForm(1)"><img title="打开新增窗口" src="/stencil/images/addFrom.png"></img></el-button>
    </div>
    <!--Element模态窗口-->
        <el-dialog title="新增客户信息" id="elDialog" :close-on-click-modal="false" :visible.sync="dialogFormVisible" style="border-radius:6px;">
            <el-form :inline="true" ref="addForm" :rules="addFormRef" :model="addForm" class="demo-input-suffix" label-width="100px">
                <el-form-item  label="客户名称：" prop="clientName">
                    <el-input  v-model="addForm.clientName" placeholder="请输入客户名称"></el-input>
                </el-form-item>
                <el-form-item  label="联系电话：" prop="clientPhone">
                    <el-input  v-model="addForm.clientPhone"  placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="车牌号码："  prop="clientCarCode">
                    <el-input  v-model="addForm.clientCarCode" @focus="inputUpEnab(0);" :disabled = disTFlse onClick="if (this.placeholder=='车牌号码'){this.value='甘G',this.placeholder=this.value}" placeholder="车牌号码"></el-input>
                </el-form-item>
                <el-form-item label="车辆品牌：" prop="clientCarBrand">
                    <el-input  v-model="addForm.clientCarBrand"  placeholder="请输入车辆品牌"></el-input>
                    <!--<el-select v-model="addForm.clientCarBrand" placeholder="请选择车辆品牌">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>-->
                </el-form-item>
                <el-form-item label="车架号：" id="carCode" prop="clientShelfCode">
                    <el-input  v-model="addForm.clientShelfCode" placeholder="请填写车架号"></el-input>
                </el-form-item>
                <el-form-item label="车辆年限：" prop="clientCarYear">
                    <el-input id="carYear" v-model.number="addForm.clientCarYear" placeholder="车辆年限">
                        <template slot="append">年</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="车辆排量：" prop="clientCarPlace">
                    <el-input  v-model="addForm.clientCarPlace" placeholder="车辆排量"></el-input>
                </el-form-item>
                <el-form-item label="销货清单：" prop="clientOrderList">
                    <el-input  @focus="dialogForm(2)" v-model="addForm.clientOrderList"  placeholder="点击填写销货清单"></el-input>
                </el-form-item>

                <el-form-item label="维修类型：" prop="clientCarType">
                    <el-input  v-model="addForm.clientCarType" placeholder="维修类型"></el-input>
                </el-form-item>
                <el-form-item label="公里数：" prop="clientCarKilo">
                    <el-input id="carKilo" v-model.number="addForm.clientCarKilo" placeholder="公里数">
                        <template slot="append">公里</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="经办人：" prop="clientCarAgent">
                    <el-input  v-model="addForm.clientCarAgent" placeholder="请输入经办人姓名"></el-input>
                </el-form-item>
                <el-form-item label="维修人：" prop="clientCarMain">
                    <el-input  v-model="addForm.clientCarMain" placeholder="请输入维修人姓名"></el-input>
                </el-form-item>
                <el-form-item label="付款方式：" prop="clientCarPay">
                    <el-select placeholder="请选择付款方式" v-model="addForm.clientCarPay">
                        <el-option label="现金支付" value="2"></el-option>
                        <el-option label="微信支付" value="0"></el-option>
                        <el-option label="支付宝支付" value="1"></el-option>
                        <el-option label="银行卡支付" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item id="date" label="维修时间：" prop="clientCarTime">
                    <el-date-picker id="picker" v-model="addForm.clientCarTime" type="date" placeholder="请选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="图片上传：" prop="clientOrderPicture">
                    <el-input @focus="inputUpEnab(1);" clearValidate v-model="addForm.clientOrderPicture" readonly  placeholder="点击上传图片"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="clientCarRemark">
                    <el-input type="textarea" clearValidate :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入备份内容" v-model="addForm.clientCarRemark" style="width:426px;"></el-input>
                </el-form-item>
            </el-form>
            <div align="center" style="margin-top: 20px;">
                <el-button @click="dialogFormVisible = false" >取 消</el-button>
                <el-button type="primary" @click="submitForm('addForm')">提交维修清单</el-button>
            </div>
        </el-dialog>
    <!--销货清单输入框-->
    <el-dialog title="销货清单数据录入" :close-on-click-modal="false" :visible.sync="dialogFormVise" id="orderDialog" style="border-radius:6px;">
        <template>
            <div>
                <el-table :data="saleForm">
                    <el-table-column prop="partName" label="配件名称" align="center" width="170">
                        <template  slot-scope="scope">
                            <el-autocomplete class="inline-input" v-model="saleForm[scope.$index].partsname" :fetch-suggestions="querySearch" placeholder="请填写配件名称"></el-autocomplete>
                            <!--<el-input v-model="saleForm[scope.$index].partName" placeholder="请填写配件名称" ></el-input>-->
                        </template>
                    </el-table-column>
                    <el-table-column prop="partNum" label="数量" align="center"  width="120">
                        <template  slot-scope="scope">
                            <el-input v-model.number="saleForm[scope.$index].partsnum" id="orderNum" placeholder="请填写数量"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="partPrice" label="单价" align="center" width="120">
                        <template  slot-scope="scope">
                            <el-input v-model.number="saleForm[scope.$index].partsprice" id="orderPrice" placeholder="请填写单价"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="partUnit" label="单位" align="center" width="120">
                        <template  slot-scope="scope">
                            <el-input v-model="saleForm[scope.$index].partsunit" id="orderUnit" placeholder="请填写单位"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totlePrice" label="总价" align="center" width="120">
                        <template  slot-scope="scope">
                            <el-input  v-model="saleForm[scope.$index].partstotal = saleForm[scope.$index].partsnum*saleForm[scope.$index].partsprice" readonly placeholder="勿用手填" id="ordertotle"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template  slot-scope="scope">
                            <el-button type="success" size="mini" @click="AddDeleteRow(scope.$index,1)" icon="el-icon-plus" circle></el-button>
                            <el-button type="warning" size="mini" @click="AddDeleteRow(scope.$index,2)" icon="el-icon-delete" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div align="center" style="margin-top: 20px;">
                    <el-button  type="primary" @click="submitOrder" >提交销货清单</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
    <el-dialog title="维修图片上传"  :close-on-click-modal="false" id="pictureDialog" :visible.sync="dialogFormPicture" style="border-radius:6px;">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test2">多图片上传</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="demo2"></div>
            </blockquote>
        </div>
    </el-dialog>
    <!--数据展示表格-->
    <div>
        <template>
            <el-table
                    :data="allOrder"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="车辆品牌">
                                <span>{{ props.row.brand }}</span>
                            </el-form-item>
                            <el-form-item label="车架号">
                                <span>{{ props.row.vin }}</span>
                            </el-form-item>
                            <el-form-item label="车辆年限">
                                <span>{{ props.row.carage }}</span>
                            </el-form-item>
                            <el-form-item label="车辆排量">
                                <span>{{ props.row.emission }}</span>
                            </el-form-item>
                            <el-form-item label="销货清单">
                                <!--查询销货清单弹框-->
                                <el-button type="text" @click="dialogTableVisible = true">查看销货清单</el-button>

                                <el-dialog title="销货清单" id="orderShow" :visible.sync="dialogTableVisible">
                                    <el-table :data="gridData">
                                        <el-table-column property="date" label="配件名称" width="150"></el-table-column>
                                        <el-table-column property="name" label="数量" ></el-table-column>
                                        <el-table-column property="address" label="单位"></el-table-column>
                                        <el-table-column property="address" label="单价"></el-table-column>
                                        <el-table-column property="address" label="合价"></el-table-column>
                                    </el-table>
                                </el-dialog>
                                <!--<span>{{ props.row.salesId }}</span>-->
                            </el-form-item>
                            <el-form-item label="维修类型">
                                <span>{{ props.row.maintenanctypes }}</span>
                            </el-form-item>
                            <el-form-item label="公里数">
                                <span>{{ props.row.runrange }}</span>
                            </el-form-item>
                            <el-form-item label="经办人">
                                <span>{{ props.row.agent }}</span>
                            </el-form-item>
                            <el-form-item label="维修人">
                                <span>{{ props.row.repairpeople }}</span>
                            </el-form-item>
                            <el-form-item label="优惠">
                                <span>{{ props.row.discounts }}</span>
                            </el-form-item>
                            <el-form-item label="实际支付">
                                <span>{{ props.row.pay }}</span>
                            </el-form-item>
                            <el-form-item label="付款方式">
                                <span>{{ props.row.paymethod }}</span>
                            </el-form-item>
                            <el-form-item label="备注" style = "width: 100%">
                                <span>{{ props.row.remark }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="客户姓名"
                        prop="customername">
                </el-table-column>
                <el-table-column
                        label="车牌号码"
                        prop="carnumber">
                </el-table-column>
                <el-table-column
                        label="电话号码"
                        prop="phone">
                </el-table-column>
                <el-table-column
                        label="维修金额"
                        prop="totalprice">
                </el-table-column>
                <el-table-column
                        label="维修时间"
                        prop="createtime">
                </el-table-column>
            </el-table>
        </template>
    </div>
</div>
</body>
<script src="/master/js/mywork.js" type="application/javascript"></script>
<script type="application/javascript">
    layui.use('upload', function(){
        debugger
        var upload = layui.upload;
        //多图片上传
        var uploadInst = upload.render({
            elem: '#test2'
            , url: '/upload/'
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                });
            }
            , done: function (res) {
                //上传完毕
            }
        });
    });
</script>
</html>